<template>
  <view class="video-detail-page">
    <!-- 返回按钮 -->
    <image class="back-btn" src="/static/back.png" @click="goBack"></image>
    
    <!-- 视频播放器 -->
    <video 
      class="video-player"
      :src="video.url"
      :poster="video.cover || '/static/default-cover.png'"
      controls
      autoplay
      :enable-progress-gesture="true"
    ></video>
    
    <!-- 视频详情信息 -->
    <view class="detail-container">
      <text class="detail-title">{{ video.title }}</text>
      
      <!-- 统计数据 -->
      <view class="stats-bar">
        <text class="stats-item">播放量：{{ formatPlayCount(video.playCount + 1) }}</text>
        <text class="stats-item">发布时间：{{ video.publishTime || formatDate(new Date()) }}</text>
      </view>
      
      <!-- 作者信息 + 关注按钮 -->
      <view class="author-card">
        <image :src="video.author?.avatar || '/static/default-avatar.png'" class="author-avatar"></image>
        <view class="author-info">
          <text class="author-name">{{ video.author?.name || '未知作者' }}</text>
          <text class="author-desc">优质内容创作者</text>
        </view>
        <button 
          class="follow-btn" 
          :class="{ followed: isFollowed }"
          @click="toggleFollow"
        >
          {{ isFollowed ? '已关注' : '+关注' }}
        </button>
      </view>
      
      <!-- 互动操作栏 -->
      <view class="interact-bar">
        <view class="interact-item" @click="toggleLike">
          <image 
            :src="isLiked ? '/static/like-active.png' : '/static/like.png'" 
            class="interact-icon"
          ></image>
          <text class="interact-text">{{ video.likeCount + (isLiked ? 1 : 0) }}</text>
        </view>
        <view class="interact-item" @click="showCommentInput = true">
          <image src="/static/comment.png" class="interact-icon"></image>
          <text class="interact-text">{{ commentList.length }}</text>
        </view>
        <view class="interact-item" @click="handleShare">
          <image src="/static/share.png" class="interact-icon"></image>
          <text class="interact-text">分享</text>
        </view>
      </view>
      
      <!-- 评论输入框 -->
      <view class="comment-input" v-if="showCommentInput">
        <input 
          v-model="commentContent" 
          placeholder="分享你的观点..." 
          @confirm="addComment"
          class="input-box"
        />
        <button @click="addComment" class="send-btn">发送</button>
      </view>
      
      <!-- 评论区 -->
      <view class="comment-section">
        <text class="section-title">热门评论（{{ commentList.length }}）</text>
        <view class="comment-list">
          <view class="comment-item" v-for="(comment, index) in commentList" :key="index">
            <image src="/static/default-avatar.png" class="comment-avatar"></image>
            <view class="comment-content">
              <view class="comment-header">
                <text class="comment-user">网友{{ Math.floor(Math.random() * 100000) }}</text>
                <text class="comment-time">{{ formatCommentTime(index) }}</text>
              </view>
              <text class="comment-text">{{ comment.content }}</text>
              <view class="comment-ops">
                <text class="like-btn" @click="likeComment(index)">
                  <image src="/static/like.png" class="like-icon"></image>
                  <text class="like-count">{{ comment.likeCount }}</text>
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 为你推荐 -->
      <view class="recommend-section">
        <text class="section-title">为你推荐</text>
        <view class="recommend-list">
          <view class="recommend-item" v-for="(item, index) in recommendList" :key="index" @click="toRecommendDetail(item)">
            <image :src="item.cover || '/static/default-cover.png'" class="recommend-cover"></image>
            <view class="recommend-info">
              <text class="recommend-title">{{ item.title }}</text>
              <text class="recommend-author">{{ item.author?.name || '未知作者' }}</text>
              <text class="recommend-play">{{ formatPlayCount(item.playCount) }}次播放</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      video: {},
      isFollowed: false,
      isLiked: false,
      commentList: [],
      commentContent: '',
      showCommentInput: false,
      recommendList: []
    };
  },
  onLoad(options) {
    try {
      this.video = JSON.parse(decodeURIComponent(options.video));
    } catch (e) {
      uni.showToast({ title: '视频加载失败', icon: 'none' });
      uni.navigateBack();
      return;
    }
    
    // 模拟评论数据
    this.commentList = [
      { content: "这个视频内容很有意义！支持一下", likeCount: 28 },
      { content: "太精彩了，期待更多作品", likeCount: 15 }
    ];
    
    // 推荐视频
    this.recommendList = [
      {
        id: Date.now() + 1001,
        title: "大兴安岭出现超大型野兽，体重一吨比轿车还大",
        cover: "/static/recommend1-cover.png",
        url: "/static/recommend1.mp4",
        author: { name: "动物大观察", avatar: "/static/avatar5.png" },
        playCount: 53000,
        duration: "02:35"
      },
      {
        id: Date.now() + 1002,
        title: "农村小伙发明自动浇水神器，不用电不用油",
        cover: "/static/recommend2-cover.png",
        url: "/static/recommend2.mp4",
        author: { name: "乡村发明家", avatar: "/static/avatar6.png" },
        playCount: 38000,
        duration: "03:12"
      }
    ];
  },
  methods: {
    goBack() { uni.navigateBack(); },
    toggleFollow() {
      this.isFollowed = !this.isFollowed;
      uni.showToast({ title: this.isFollowed ? '关注成功' : '取消关注', icon: 'none' });
    },
    toggleLike() { this.isLiked = !this.isLiked; },
    addComment() {
      if (!this.commentContent.trim()) return uni.showToast({ title: '请输入评论', icon: 'none' });
      this.commentList.unshift({ content: this.commentContent.trim(), likeCount: 0 });
      this.commentContent = '';
      this.showCommentInput = false;
      uni.showToast({ title: '评论成功', icon: 'success' });
    },
    likeComment(index) { this.commentList[index].likeCount++; },
    handleShare() {
      uni.showActionSheet({
        itemList: ['分享给好友', '分享到朋友圈', '保存视频'],
        success: (res) => {
          const tips = ['分享给好友', '分享到朋友圈', '视频保存成功'];
          uni.showToast({ title: tips[res.tapIndex], icon: res.tapIndex === 2 ? 'success' : 'none' });
        }
      });
    },
    formatPlayCount(count) {
      return count >= 10000 ? (count / 10000).toFixed(1) + '万' : count;
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    formatCommentTime(index) {
      const times = ['刚刚', '10分钟前', '30分钟前', '1小时前', '3小时前', '1天前'];
      return times[index % times.length];
    },
    toRecommendDetail(video) {
      uni.navigateTo({ url: `/pages/videoDetail/videoDetail?video=${encodeURIComponent(JSON.stringify(video))}` });
    }
  }
};
</script>

<style scoped>
.video-detail-page {
  background: #fff;
  min-height: 100vh;
}

.back-btn {
  position: fixed;
  top: 20rpx;
  left: 20rpx;
  width: 50rpx;
  height: 50rpx;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 10rpx;
  object-fit: contain;
}

.video-player {
  width: 100%;
  height: 300rpx;
  object-fit: cover;
}

.detail-container {
  padding: 20rpx;
}

.detail-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 15rpx;
  display: block;
  line-height: 1.5;
}

.stats-bar {
  display: flex;
  justify-content: space-between;
  font-size: 22rpx;
  color: #999;
  margin-bottom: 20rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.author-card {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.author-avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  margin-right: 15rpx;
  object-fit: cover;
}

.author-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 5rpx;
}

.author-desc {
  font-size: 22rpx;
  color: #999;
}

.follow-btn {
  background: #ff4d4f;
  color: #fff;
  font-size: 24rpx;
  padding: 8rpx 25rpx;
  border-radius: 30rpx;
  border: none;
}

.follow-btn.followed {
  background: #f5f5f5;
  color: #999;
}

.interact-bar {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
}

.interact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.interact-icon {
  width: 40rpx;
  height: 40rpx;
  object-fit: contain;
}

.interact-text {
  font-size: 24rpx;
  color: #666;
}

.comment-input {
  display: flex;
  align-items: center;
  gap: 15rpx;
  margin-bottom: 30rpx;
  padding: 10rpx;
  background: #f5f5f5;
  border-radius: 30rpx;
}

.input-box {
  flex: 1;
  height: 60rpx;
  background: transparent;
  font-size: 26rpx;
  padding: 0 15rpx;
}

.send-btn {
  background: #ff4d4f;
  color: #fff;
  font-size: 24rpx;
  padding: 8rpx 25rpx;
  border-radius: 30rpx;
  border: none;
}

.comment-section, .recommend-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 15rpx;
}

.comment-list, .recommend-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.comment-item {
  display: flex;
  gap: 15rpx;
}

.comment-avatar {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  object-fit: cover;
}

.comment-content {
  flex: 1;
  background: #f5f5f5;
  padding: 15rpx;
  border-radius: 15rpx;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.comment-user {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}

.comment-time {
  font-size: 20rpx;
  color: #999;
}

.comment-text {
  font-size: 24rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 10rpx;
  display: block;
}

.like-btn {
  font-size: 22rpx;
  color: #999;
  display: flex;
  align-items: center;
  gap: 5rpx;
}

.like-icon {
  width: 22rpx;
  height: 22rpx;
  object-fit: contain;
}

.recommend-item {
  display: flex;
  gap: 15rpx;
  background: #f5f5f5;
  border-radius: 15rpx;
  overflow: hidden;
}

.recommend-cover {
  width: 140rpx;
  height: 90rpx;
  object-fit: cover;
}

.recommend-info {
  flex: 1;
  padding: 10rpx 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.recommend-title {
  font-size: 24rpx;
  color: #333;
  margin-bottom: 5rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recommend-author, .recommend-play {
  font-size: 20rpx;
  color: #999;
  margin-bottom: 3rpx;
}

@media screen and (orientation: landscape) {
  .video-player {
    height: 100vh;
  }
}
</style>